<template>
  <!-- 基本信息 -->
  <a-card :bordered="false" class="base-info-style">
    <title-name title="基本信息"></title-name>
    <!-- 表单信息 -->
    <custom-form ref="ruleForm" isValidate :formList="formList" :form="form" :editModel="onlyRead ? 'V' : 'E'"
      :isEmit="false" :treeList="treeList" @getPostInfo="getPostInfo">
      <!-- 验证人插槽 -->
      <template slot="acceptanceEmployeeId" slot-scope="scoped">
        <a-tag v-for="person in personList" :key="person.userId" class="mb10" :closable="!onlyRead" color="#108ee9"
          @close="handleRemovePerson">
          {{ person.name }}
        </a-tag>
        <!-- 新增按钮 -->
        <a-button v-if="!onlyRead" class="ml12" style="flex-shrink: 0" icon="plus" size="small" type="primary"
          :disabled="scoped.data.formItem.disabled" ghost @click="visible = true"> 新增 </a-button>
        <DialogSelectPerson ref="DialogSelectPerson" :visible.sync="visible" @confirmSelects="handleConfirmSelect" />
      </template>
      <!-- 抄送人插槽 -->
      <template slot="sendUserIds" slot-scope="scoped">
        <a-tag v-for="person in sendUser" :key="person.userId" class="mb10" :closable="!onlyRead"
          color="#108ee9" @close="() => handleRemovePeopleWhoCopie(person.userId)">
          {{ person.name }}
        </a-tag>
        <!-- 新增按钮 -->
        <a-button v-if="!onlyRead" class="ml12" style="flex-shrink: 0" icon="plus" size="small" type="primary"
          :disabled="scoped.data.formItem.disabled" ghost @click="selPeopleWhoCopied"> 新增 </a-button>
        <SelectPerson ref="SelectPersonWithTree" header-title="添加抄送人员" :un-repeat-person="true"
          @confirm="submitForms" />
      </template>
    </custom-form>
  </a-card>
</template>

<script>
import ASelectOrgPeople from '@/components/Select/ASelectOrgPeople' // 人员选择器
import SelectTreeOrg from '@/components/Select/SelectTreeOrg' // 组织树选择器
import DialogSelectPerson from './DialogSelectPerson' // 人员选择弹窗
import SelectPerson from '@/components/BComponents/BSelectPerson'
export default {
  name: 'a' + Date.now(),
  components: {
    DialogSelectPerson,
    SelectPerson
  },
  props: {
    // 表单
    form: {
      type: Object,
      default: () => ({})
    },
    // 只读模式
    onlyRead: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      visible: false, // 人员弹窗显隐
      personList: [], // 验证人员列表
      sendUser: [],//抄送人员列表
      editModel: this.$route.query.editModel * 1 || 0,
      status: this.$route.query.status,
      treeList: []
    }
  },
  created() {
  },
  computed: {
    // 表单配置项
    formList() {
      let list = [
        {
          keyName: 'receivingUnit',
          label: '接收单位',
          type: 'BaseInput',
          rule: {
            required: true,
            whitespace: true,
            message: '请输入接收单位',
            trigger: 'change'
          }
        },
        {
          keyName: 'receivingEmployee',
          label: '接收人',
          type: 'BaseInput',
          rule: {
            required: true,
            whitespace: true,
            message: '请输入接收人',
            trigger: 'change'
          }
        },
        {
          keyName: 'inspectedUnitId',
          viewName: 'inspectedUnitName',
          label: '受检单位',
          type: SelectTreeOrg,
          attrs: {
            parentNodeIsDisabled: false,
            returnFindItem: true,
          },
          rule: {
            required: true,
            whitespace: true,
            message: '请输入受检单位',
            trigger: 'change'
          },
          selectChange: (e) => {
            // 添加项目id到表单
            this.form.projectId = e.projectId
            // 添加受检单位名称到表单
            this.form.inspectedUnitName = e.orgName;
            this.form.orgId = e.orgId;
            // 用来弹框页面判断是否项目还是公司
            this.form.tageCode = e?.tageCode;
            // 重置补充信息人员
            this.$set(this.form, 'supplementEmployeeId', void 0)
            this.$set(this.form,'checks',[])
          }
        },
        {
          keyName: 'supplementEmployeeId',
          viewName: 'supplementEmployeeName',
          label: '补充信息人员',
          hidden: this.editModel == 4 || this.status == 'GENERATE',
          type: ASelectOrgPeople,
          attrs: {
            keyValue: 'inspectedUnitId', // 联动字段名
            init: false, // 取消数据初始化，根据受检单位请求人员
            isRank:true
          },
          rule: {
            required: true,
            message: '请选择入补充信息人员',
            trigger: 'change'
          }
        },
        {
          keyName: 'creatorName',
          label: '下发人',
          type: 'BaseInput',
          disabled: true
        },
        {
          keyName: 'createTime',
          label: '下发时间',
          type: 'BaseInput',
          disabled: true
        },
        {
          keyName: 'basicSituation',
          label: '基本情况',
          type: 'BaseTextarea',
          span: 24,
          // rule: {
          //   required: true,
          //   whitespace: true,
          //   message: '请输入基本情况',
          //   trigger: 'change'
          // }
        },
        {
          keyName: 'rectifyTerm',
          label: '整改期限',
          type: 'a-date-picker',
          attrs: {
            valueFormat: 'YYYY-MM-DD'
          },
          rule: {
            required: true,
            message: '请选择整改期限',
            trigger: 'change'
          }
        },
        {
          keyName: 'acceptanceEmployeeId',
          label: '验证人',
          slot: true,
          rule: {
            required: true,
            message: '请选择验证人',
            trigger: 'change'
          }
        },
        {
          keyName: 'sendUserIds',
          label: '抄送人',
          slot: true
        }
      ]

      return list
    },
  },
  watch:{
      form(e){
         if(e && this.editModel>0){   //查看编辑
           this.sendUser = this.form.sendUser
         }
      },
  },
  methods: {
    /**
     * @description: 人员选择确认
     * @param {*} list：选中人员
     * @return {*}
     */
    handleConfirmSelect(list) {
      this.personList = list
      this.$set(this.form, 'acceptanceEmployeeId', list[0].id)
      this.visible = false
      this.$nextTick(() => {
        // 触发表单校验
        this.$refs.ruleForm?.validateField('acceptanceEmployeeId')
      })
    },
    /**
     * @description:删除人员
     */
    handleRemovePerson() {
      this.personList = []
      this.form.acceptanceEmployeeId = null
      this.form.acceptanceEmployeeName = null
      this.$refs.DialogSelectPerson.persons.length = 0
      // 触发表单校验
      this.$refs.ruleForm?.validateField('acceptanceEmployeeId')
    },
    /**
* @description:获取当前选中的岗位数据
*/
    getPostInfo(data) {
      this.$emit("getPostInfo", data)
    },
    /**
* @description:点击新增抄送人
*/
    selPeopleWhoCopied() {
      const list = this.sendUser
      this.$refs.SelectPersonWithTree.open(list)
    },
    /**
* @description:删除当前抄送人
*/
    handleRemovePeopleWhoCopie(removedTag) {
      const newList = this.sendUser.filter(item => item.userId !== removedTag);
      this.sendUser = newList;
      this.submitForms(newList)
    },
    /**
* @description:人员选择提交
*/
    submitForms(e) {
      let arr = []
      let peopleWhoCopieListId = [];
      e.forEach((item) => {
        arr.push(item)
      })
      arr.forEach((item)=>{
        peopleWhoCopieListId.push(item.id)
      })
      this.sendUser = arr
      this.form.sendUserIds = peopleWhoCopieListId.join(',');
    },
  },
}
</script>